<template>
  <el-row class="tac">
    <el-col :span="12">
      <el-menu
          :default-active="Eindex"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :router="true"
          active-text-color="#4bdeff"
          text-color="#fff"
          background-color="#1d3954"
      >
        <!-- 求职者信息管理 -->
        <el-menu-item index="/adminMain/seekerManage">
          <el-icon><UserFilled /></el-icon>
          <span>求职者信息管理</span>
        </el-menu-item>
        <!-- 招聘者信息管理 -->
        <el-menu-item index="/adminMain/recruiterManage">
          <el-icon><Avatar /></el-icon>
          <span>招聘者信息管理</span>
        </el-menu-item>
        <!-- 反馈信息管理 -->
        <el-menu-item index="/adminMain/feedbackManage">
          <el-icon><Comment /></el-icon>
          <span>反馈信息管理</span>
        </el-menu-item>
        <!-- 招聘岗位信息管理 -->
        <el-menu-item index="/adminMain/jobManage">
          <el-icon><MessageBox /></el-icon>
          <span>招聘岗位信息管理</span>
        </el-menu-item>
        <!-- 招聘岗位类型信息管理 -->
        <el-menu-item index="/adminMain/jobTypeManage">
          <el-icon><Grid /></el-icon>
          <span>岗位类型管理</span>
        </el-menu-item>
        <!-- 技能类型信息管理 -->
        <el-menu-item index="/adminMain/skillManage">
          <el-icon><HelpFilled /></el-icon>
          <span>技能类型管理</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { onMounted, ref, watch } from "vue";

const route = useRoute();
const Eindex = ref();

onMounted(() => {
  if(route.path != '/adminMain/seekerManage') {
    Eindex.value = route.path;
  }
})

watch(route, () => {
  Eindex.value = route.path;
  console.log(Eindex.value);
})

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

</script>

<style scoped>
* {
  width: 200px;
}
.el-menu-vertical-demo {
  height: 100vh;
  --el-menu-hover-bg-color: #8797A5FF !important;
}
.el-menu-item {
  border-right: solid 1px var(--el-menu-border-color);
}
/* 使用/deep/选择器来穿透组件的作用域限制，以便能修改且不被覆盖 */
div /deep/ .el-menu-item-group__title {
  padding: 0 !important;
}
</style>